<template>
  <div>
    <div class="ant-pro-page-header-search">
      <a-input-search
        v-model="value"
        placeholder=""
        enter-button
        @search="searchSoilByName"
        style="width: 600px; height: 50px"
      />
    </div>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-form :form="form" layout="inline">
        <standard-form-row title="所属类目" block style="padding-bottom: 11px;">
          <a-form-item>
            <tag-select v-model="soilTypeList" :value="soilTypeList" @change="handleClick">
              <tag-select-option value="水稻土">水稻土</tag-select-option>
              <tag-select-option value="砖红壤">砖红壤</tag-select-option>
              <tag-select-option value="赤红壤">赤红壤</tag-select-option>
              <tag-select-option value="红壤">红壤</tag-select-option>
              <tag-select-option value="燥红土">燥红土</tag-select-option>
              <tag-select-option value="黄壤">黄壤</tag-select-option>
              <tag-select-option value="新积土">新积土</tag-select-option>
              <tag-select-option value="石灰（岩）土">石灰（岩）土</tag-select-option>
              <tag-select-option value="火山灰土">火山灰土</tag-select-option>
              <tag-select-option value="紫色土">紫色土</tag-select-option>
              <tag-select-option value="磷质石灰土">磷质石灰土</tag-select-option>
              <tag-select-option value="滨海盐土">滨海盐土</tag-select-option>
              <tag-select-option value="酸性硫酸盐土">酸性硫酸盐土</tag-select-option>
            </tag-select>
          </a-form-item>
        </standard-form-row>

        <standard-form-row title="地区" grid >
          <a-row>
            <a-col :md="24">
              <a-form-item :wrapper-col="{ span: 24 }">
                <a-select
                  style="max-width: 1500px; width: 100%; margin: 0 auto"
                  mode="multiple"
                  placeholder="选择 地区"
                  v-decorator="['owner']"
                  @change="handleChange"
                >
                  <a-select-option v-for="(item, index) in owners" :key="index">{{ item.alias }}</a-select-option>
                </a-select>

                <!--                <a class="list-articles-trigger" @click="setOwner">只看自己的</a>-->
              </a-form-item>
            </a-col>
          </a-row>
        </standard-form-row>

        <!--        <standard-form-row title="其它选项" grid last>
          <a-row :gutter="16">
            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8">
              <a-form-item label="地区" :wrapper-col="{ xs: 24, sm: 24, md: 12 }">
                <a-select placeholder="不限" style="max-width: 200px; width: 100%;">
                  <a-select-option value="海口">A市</a-select-option>
                  <a-select-option value="文昌">B市</a-select-option>
                  <a-select-option value="琼海">C市</a-select-option>
                  <a-select-option value="五指山">D市</a-select-option>
                  <a-select-option value="三亚">E市</a-select-option>
                  <a-select-option value="东方">F市</a-select-option>
                  <a-select-option value="乐东">G市</a-select-option>
                  <a-select-option value="白沙">H市</a-select-option>
                  <a-select-option value="西沙">I市</a-select-option>
                  <a-select-option value="琼山">G市</a-select-option>
                  <a-select-option value="儋州">K市</a-select-option>
                  <a-select-option value="定安">L市</a-select-option>
                  <a-select-option value="万宁">M市</a-select-option>
                  <a-select-option value="临高">N市</a-select-option>
                  <a-select-option value="澄迈">O市</a-select-option>
                  <a-select-option value="琼中">P市</a-select-option>
                  <a-select-option value="昌江">Q市</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="8">
              <a-form-item label="好评度" :wrapper-col="{ xs: 24, sm: 24, md: 12 }">
                <a-select placeholder="不限" style="max-width: 200px; width: 100%;">
                  <a-select-option value="优秀">优秀</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </standard-form-row>-->
      </a-form>
    </a-card>

    <a-card style="margin-top: 24px;" :bordered="false">
      <a-list
        size="large"
        rowKey="id"
        :loading="loading"
        itemLayout="vertical"
        :dataSource="data"
      >
        <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
          <template slot="actions">
            <icon-text type="star-o" :text="item.star" />
            <icon-text type="like-o" :text="item.like" />
            <icon-text type="message" :text="item.message" />
          </template>
          <a-list-item-meta>
            <a slot="title" :href="`https://www.baidu.com/s?wd=${encodeURIComponent(item.soilName)}`" target="_blank">{{ item.soilName }}</a>
            <template slot="description">
              <span>
                <a-tag>土壤描述</a-tag>
                <a-tag>使用场景</a-tag>
                <a-tag>土壤特点</a-tag>
              </span>
            </template>
          </a-list-item-meta>
          <article-list-content :description="item.description" :owner="item.owner" :href="item.href" :updateAt="item.updatedAt" />
        </a-list-item>
        <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
          <!--          <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>-->
        </div>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import { TagSelect, StandardFormRow, ArticleListContent } from '@/components'
import { searchSoil, searchSoilByName } from '@/api/soil'
import IconText from './components/IconText'
const TagSelectOption = TagSelect.Option

const owners = [
  {
    id: 0,
    name: '海口',
    alias:'a市'
  },
  {
    id: 1,
    name: '文昌',
    alias:'b市'
  },
  {
    id: 2,
    name: '琼海',
    alias:'c市'
  },
  {
    id: 3,
    name: '五指山',
    alias:'d市'
  },
  {
    id: 4,
    name: '三亚',
     alias:'e市'
  },
  {
    id: 5,
    name: '东方',
    alias:'f市'
  },
  {
    id: 6,
    name: '乐东',
    alias:'g市'
  },
  {
    id: 7,
    name: '白沙',
    alias:'h市'
  },
  {
    id: 8,
    name: '西沙',
    alias:'i市'
  },
  {
    id: 9,
    name: '琼山',
    alias:'j市'
  },
  {
    id: 10,
    name: '儋州',
    alias:'k市'
  },
  {
    id: 11,
    name: '定安',
    alias:'l市'
  },
  {
    id: 12,
    name: '澄迈',
    alias:'m市'
  },
  {
    id: 13,
    name: '临高',
    alias:'n市'
  },
  {
    id: 14,
    name: '澄迈',
    alias:'o市'
  },
  {
    id: 15,
    name: '琼中',
    alias:'p市'
  },
  {
    id: 16,
    name: '昌江',
    alias:'q市'
  }
]

export default {
  components: {
    TagSelect,
    TagSelectOption,
    StandardFormRow,
    ArticleListContent,
    IconText
  },
  props: {
    searchData: {}
  },
  data () {
    return {
      value: '',
      owners,
      loading: true,
      loadingMore: false,
      data: this.searchData,
      form: this.$form.createForm(this),
      areaList: [],
      soilTypeList: [],
      soilTypeList2: [
        {
          value: '砖红壤',
          label: '砖红壤',
          checked: false
        },
        {
          value: '水稻土',
          label: '水稻土',
          checked: false
        }, {
          value: '赤红壤',
          label: '赤红壤',
          checked: false
        }, {
          value: '红壤',
          label: '红壤',
          checked: false
        }, {
          value: '燥红土',
          label: '燥红土',
          checked: false
        }, {
          value: '黄壤',
          label: '黄壤',
          checked: false
        }, {
          value: '新积土',
          label: '新积土',
          checked: false
        }, {
          value: '石灰（岩）土',
          label: '石灰（岩）土',
          checked: false
        }, {
          value: '火山灰土',
          label: '火山灰土',
          checked: false

        }, {
          value: '磷质石灰土',
          label: '磷质石灰土',
          checked: false

        }, {
          value: '滨海盐土',
          label: '滨海盐土',
          checked: false
        }, {
          value: '酸性硫酸盐土',
          label: '酸性硫酸盐土',
          checked: false
        }
      ],
      typeList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    searchSoilByName () {
      this.loading = true
      const name = {
        soilName: this.value
      }
      searchSoilByName(name).then((res) => {
        console.log(res.data)
        this.data = res.data
        this.loading = false
      })
    },
    handleClick () {
      console.log(this.soilTypeList2)
      console.log(this.soilTypeList)
      console.log(JSON.stringify(this.soilTypeList))
      const obj = JSON.parse(JSON.stringify(this.soilTypeList)) // 将字符串转换为对象
      const { value, checked } = obj // 使用解构赋值将对象的值分别赋给变量
      console.log(value) // 输出 "新积土"
      console.log(checked) // 输出 true
        if (value === 'total') {
          this.soilTypeList2.forEach((soilType) => {
            soilType.checked = !soilType.checked
          })
        }
        if (value !== 'total') {
          this.soilTypeList2.forEach((soilType) => {
            if (soilType.value === value) {
              soilType.checked = !soilType.checked
            }
          })
        }
      console.log(this.soilTypeList2)
      const typeList = []
      this.soilTypeList2.forEach((soilType) => {
       console.log(soilType.checked)
        if (soilType.checked === true) {
          typeList.push(soilType.value)
        }
      })
      this.typeList = typeList
      this.loading = true
      const param = {
        areaList: this.areaList,
        typeList: typeList
      }
      searchSoil(param).then((res) => {
        this.data = res.data
        this.loading = false
      })
    },
    searchSoil (name) {
      this.loading = true
      for (let i = 0; i < this.owners.length; i++) {
        if (this.owners[i].name === name) {
          this.owners[i].id = 1
          this.areaList.push(owners[i].name)
        }
      }
      console.log(this.areaList)
      searchSoil(this.areaList).then((res) => {
        this.data = res.data
        this.loading = false
      })
    },
    handleChange (value) {
      console.log(value)
      const areaList2 = []
      value.forEach((val) => {
        this.owners.forEach((owner) => {
          if (val === owner.id) {
            areaList2.push(owner.name)
            console.log(areaList2)
          }
        })
      })
      this.areaList = areaList2
      console.log(areaList2)
      const param = {
        areaList: areaList2,
        typeList: this.typeList
      }
      searchSoil(param).then((res) => {
        this.data = res.data
        this.loading = false
      })
    },
    getList () {
      this.$http.get('/list/soil').then(res => {
        console.log('res', res)
        this.data = res.data
        this.loading = false
      })
    },
    loadMore () {
      this.loadingMore = true
      this.$http.get('/list/soil').then(res => {
        this.data = this.data.concat(res.result)
      }).finally(() => {
        this.loadingMore = false
      })
    },
    setOwner () {
      const { form: { setFieldsValue } } = this
      setFieldsValue({
        owner: ['wzj']
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-components-tag-select {
  :deep(.ant-pro-tag-select .ant-tag) {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}

.list-articles-trigger {
  margin-left: 12px;
}
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
}
</style>
